import { Modal, Form, Input, DatePicker, message, AutoComplete, Select, InputNumber, Space } from 'antd'
const { RangePicker } = DatePicker;
const FormItem = Form.Item;
import EnterpriseUserSelect from '@/components/EnterpriseUserSelect';
import { useEffect } from 'react';
import { formetDate } from '@/utils/dateUtils'
import { connect } from 'umi';
import { RichTextEdit } from '@/components/RichText'
const { Option } = Select;
import { COST_TIME_UNIT, TASK_TYPE } from '@/consts/project'
import ArrayUtils from '@/utils/ArrayUtils';
import styles from './styles.less'
import NumberUtils from '@/utils/NumberUtils';
import { useState } from 'react';
import { save } from '@/services/project/task'
import ProjectProdSelect from '@/pages/projects/components/ProjectProduct/ProjectProdSelect'
import ProjectDevSelect from '@/pages/projects/components/ProjectDev/ProjectDevSelect'
import ProjectQaSelect from '@/pages/projects/components/ProjectQA/ProjectQaSelect'
const TaskAddModalInner = (props) => {

    const {
        projectId,
        visible,
        onCancel,
        onSaveSuccess,
        dispatch
    } = props;

    const [form] = Form.useForm();
    const [projectItemType, setProjectItemType] = useState("PROD");
    const [modalVisible, setModalVisible] = useState(visible);
    const [defaultForm, setDefaultForm] = useState({
        costTimeUnit: "1",
        projectItemType: "PROD"
    })

    useEffect(() => {
        if (visible) {
            setModalVisible(visible)
        }
    }, [visible])

    const saveTask = async () => {
        const values = await form.validateFields()
        console.log(values)
        const data = {
            ...values
        }
        if (values.planDate) {
            data.planStartDate = formetDate(values.planDate[0]);
            data.planEndDate = formetDate(values.planDate[1]);
            data.planDate = undefined
        }
        if (values.actualDate) {
            data.actualStartDate = formetDate(values.actualDate[0]);
            data.actualEndDate = formetDate(values.actualDate[1]);
            data.actualDate = undefined
        }
        save(projectId, data).then(({ success }) => {
            if (success) {
                message.success("保存成功！")
                onSaveSuccess()
                form.resetFields();
            }
        })
    }

    return (<Modal
        visible={modalVisible}
        closable
        title={"新增任务"}
        onCancel={onCancel}
        onOk={() => {
            saveTask();
        }}
        width="70%"
        destroyOnClose
        okText={"确认"}
        cancelText={"取消"}
    >
        <Form
            form={form}
            className={styles.taskAddFrom}
            labelAlign="right"
            initialValues={defaultForm}
            onValuesChange={(values) => {
                console.log(values)
                if (values.projectItemType) {
                    setProjectItemType(values.projectItemType);
                    form.resetFields(["projectItemId"])
                }
            }}
        >
            <FormItem
                label={"名称"}
                name="name"
                rules={[
                    {
                        required: true,
                        message: "请输入名称",
                    },
                ]}
            >
                <Input placeholder={"请输入名称"} maxLength={20} ></Input>
            </FormItem>
            <Form.Item className={styles.formItemGroup} >
                <FormItem
                    label="负责人"
                    name="userId"
                    style={{ width: 'calc(50%)', marginRight: '8px' }}
                    rules={[
                        {
                            required: true,
                            message: "请选择负责人",
                        },
                    ]}
                >
                    <EnterpriseUserSelect defaultMy projectId={projectId} ></EnterpriseUserSelect>
                </FormItem>
                <Input.Group
                    style={{ display: "flex", width: 'calc(50%)' }}
                    compact>
                    <Form.Item
                        label="工时"
                        name="costTimeCnt"
                        style={{ display: "flex", width: "68%" }}
                        rules={[
                            {
                                required: true,
                                validator: (rules, value) => {
                                    if (NumberUtils.isPositiveNumber(value)) {
                                        console.log('isPositiveNumber', value)
                                        return Promise.resolve()
                                    }
                                    console.log('notPositiveNumber', value)
                                    return Promise.reject()
                                },
                                message: "请输入正确工时数",
                            }
                        ]}
                    >

                        <AutoComplete placeholder="请输入工时数" options={[{ value: 0.5 }, { value: 1 }, { value: 2 }, { value: 3 }, { value: 4 }, { value: 5 }]}>
                        </AutoComplete>
                    </Form.Item>
                    <Form.Item
                        name="costTimeUnit"
                        style={{ width: "32%" }}
                        rules={[
                            {
                                required: true,
                                message: "请输入工时类型",
                            }
                        ]}
                    >
                        <Select>
                            {ArrayUtils.jsonToArray(COST_TIME_UNIT).map(item => <Option value={`${item.key}`} key={`${item.key}`}>{item.value.name}</Option>)}
                        </Select>
                    </Form.Item>
                </Input.Group>
            </Form.Item>
            <Form.Item className={styles.formItemGroup}>
                <FormItem
                    label="任务类型"
                    name="projectItemType"
                    style={{ width: 'calc(50%)', marginRight: '8px' }}
                >
                    <Select placeholder={"请输入任务类型"}>
                        {ArrayUtils.jsonToArray(TASK_TYPE).map(item => <Option value={`${item.key}`} key={`${item.key}`}>{item.value.name}</Option>)}
                    </Select>
                </FormItem>
                {projectItemType === "PROD" &&
                    <Form.Item
                        label="关联项"
                        name="projectItemId"
                        style={{ width: 'calc(50%)' }}
                    >
                        <ProjectProdSelect projectId={projectId} />
                    </Form.Item>
                }
                {projectItemType === "DEV" &&
                    <Form.Item
                        label="关联项"
                        name="projectItemId"
                        style={{ width: 'calc(50%)' }}
                    >
                        <ProjectDevSelect projectId={projectId} />
                    </Form.Item>
                }
                {projectItemType === "QA" &&
                    <Form.Item
                        label="关联项"
                        name="projectItemId"
                        style={{ width: 'calc(50%)' }}
                    >
                        <ProjectQaSelect projectId={projectId} />
                    </Form.Item>
                }
            </Form.Item>
            <Form.Item name="actualDate" label={"实际周期"}>
                <RangePicker format="YYYY-MM-DD" />
            </Form.Item>
            <Form.Item name="planDate" label={"预计周期"}>
                <RangePicker format="YYYY-MM-DD" />
            </Form.Item>
            <FormItem label={"内容"}
                name="content"
            >
                <RichTextEdit showFormButton={false} size="small" />
            </FormItem>
        </Form>
    </Modal>)
}



const TaskAddModal = (props) => {
    const {
        visible
    } = props

    return (visible && <TaskAddModalInner {...props} />)
}

export default TaskAddModal;